<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">视频列表</div>
        <div class="layui-card-body">
            <table id="videolist" lay-filter="videoFilter"></table>
        </div>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //获取模块对象
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;

        table.render({
            elem: '#videolist',
            url: '/video/list',
            size: 'sm',
            page: {
                limit: 5,
                limits: [2, 5, 10, 15, 20]
            },
            cols: [[
                {type: 'checkbox'},
                {title: '序号', type: 'numbers'},
                {title: '封面图',templet: '<div><img src="{{d.coverimg}}" alt=""></div>'},
                {title: '标题', field: 'title'},
                {title: '频道', templet:'<div>{{d.category.name}}</div>'},
                {title: '作者', templet:'<div>{{d.user ? d.user.username : "匿名" }}</div>'},
                {title: '发布时间', width: 180,templet:'<div>{{layui.util.toDateString(d.createtime, "yyyy年MM月dd日 HH:mm:ss")}}</div>'},
                {title: '标签', field: 'tags'},
                {title: '观看数', field: 'viewcount'},
                {title: '点赞数', field: 'lovecount'},
                {title: '收藏数', field: 'favcount'},
                {title: '转发数', field: 'forward'},
                {title: '状态', templet: function (d) {
                        if (d.status === 0){
                            return '<span class="layui-badge layui-bg-orange">审核中</span>'
                        }else if (d.status === 1){
                            return '<span class="layui-badge layui-bg-red">审核失败</span>'
                        }else {
                            return '<span class="layui-badge layui-bg-green">审核通过</span>'
                        }
                    }},
                {title: '操作', templet: '#rowTools',width: 240}   // 自定义行工具栏
            ]],
            toolbar: '#toolbar',   //自定义头工具栏
        })

        //为表头绑定事件
        table.on('toolbar(videoFilter)',function (obj) {


        })


        //为表格行绑定事件
        table.on('tool(videoFilter)',function (obj) {
            //获取被点击的单元格按钮
            let Event = obj.event
            //获取当前行数据
            let Data = obj.data
            // console.log(Event,Data)

            switch (Event) {
                case 'del':
                    //批量删除
                    layer.confirm('确定要删除选中的视频吗？', {icon: 3, title: '提示'}, function (index) {
                        //获取选中行数据
                        $.ajax({
                            url: '/video/delete',
                            type: 'post',
                            data: {ids: obj.data.id},
                            success: function (res) {
                                if (res.code === 0){
                                    layer.msg(res.msg,{icon: 1})
                                    table.reload('videolist')
                                }else {
                                    layer.msg(res.msg,{icon: 2})
                                }
                            }
                        })
                    })
                    break;
                case 'details':
                    layer.open({
                        type: 1,
                        title: '视频详情',
                        // area: ['800px', '600px'],
                        content: $('#video-details-dialog').html(),
                        shade: 0.6,
                        shadeClose: true,
                        maxmin: true,
                        anim:5,
                        success: function (layero) {
                            //获取视频详情
                            layero.find('#title').text(Data.title)
                            layero.find('#category').text(Data.category.name)
                            layero.find('#author').text(Data.user ? Data.username : '匿名')

                            layero.find('#coverimg').prop('src',Data.coverimg)
                            layero.find('#preview').prop('src',Data.url)
                            layero.find('#tags').text(Data.tags)
                            layero.find('#viewcount').text(Data.viewcount)
                            layero.find('#lovecount').text(Data.lovecount)
                            layero.find('#favcount').text(Data.favcount)
                            layero.find('#forward').text(Data.forward)
                            layero.find('#status').text(Data.status === 0 ? '审核中' : Data.status === 1 ? '审核失败' : '审核通过')
                            layero.find('#createtime').text(util.toDateString(Data.createtime,'yyyy-MM-dd HH:mm:ss'))
                            layero.find('#summary').text(Data.summary)
                        }
                    })
                    break;
                case 'edit':
                    layer.open({
                        type: 1,
                        title: '编辑视频',
                        area: ['800px', '600px'],
                        content: $('#video-edit-dialog').html(),
                        success: function (layero, index) {

                        }
                    })
            }

        })


    })


</script>
<!--自定义头工具栏-->
<script id="toolbar" type="text/html">
    <div class="layui-inline">
        <button class="layui-btn layui-btn-danger" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" class="layui-input" id="keyword" placeholder="请输入查询关键字">
        </div>
        <button class="layui-btn layui-btn-normal" lay-event="search">
            <i class="layui-icon layui-icon-search"></i>
            搜索
        </button>
    </div>
</script>
<!--自定义行工具栏-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-about"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

<!--试听按钮的页面模板-->


<!--视频详情弹层-->
<div id="video-details-dialog" style="display: none;padding: 20px">
    <table class="layui-table" lay-even>
        <tr>
            <th colspan="7" style="height: 120px" >
                <video id="preview" src="" height="100%" controls></video>
            </th>
        </tr>
        <tr>
            <td rowspan="3"><img src="" id="coverimg" width="100px" alt=""></td>
            <td>标题:</td>
            <td id="title">xxx</td>
            <td>频道:</td>
            <td id="category">xxxx</td>
            <td>作者：</td>
            <td id="author">xxxx</td>
        </tr>
        <tr>
            <td class="layui-elip">标签：</td>
            <td id="tags" class="layui-elip">xxxx</td>
            <td class="layui-elip">发布时间</td>
            <td id="releasetime" class="layui-elip">xxxx</td>
            <td>观看数</td>
            <td id="viewcount">xxxx</td>
        </tr>
        <tr>
            <td>点赞</td>
            <td id="lovecount">xxx</td>
            <td>收藏</td>
            <td id="favcount">xx</td>
            <td>转发</td>
            <td id="forward">xxx</td>
        </tr>
        <tr>
            <td colspan="7" >视频详情</td>
        </tr>
        <tr>
            <td colspan="7" id="summary"></td>
        </tr>
    </table>
</div>

<!--视频编辑弹层-->
<div id="video-edit-dialog" style="display: none;padding: 20px">
    <form class="layui-form" id="musicInfo" lay-filter="music-info">
        <input type="hidden" name="id">
        <table class="layui-table" lay-even>
            <tr>
                <td rowspan="3"><img src="" class="coverImg" height="100px" alt=""></td>
                <td>歌曲名:</td>
                <td><input type="text" name="name" class="layui-input"></td>
                <td>专辑:</td>
                <td>
                    <select name="aid" id="aid" lay-filter="select-filter">
                        <option value="0">匿名</option>
                    </select>
                </td>
                <td>歌手：</td>
                <td><input type="text" name="sname" class="layui-input"></td>
            </tr>
            <tr>
                <td>发行公司：</td>
                <td><input type="text" class="layui-input" name="company" readonly></td>
                <td>发行时间</td>
                <td><input type="text" class="layui-input" name="releasedate" readonly></td>
                <td>歌曲风格</td>
                <td>
                    <select name="style">
                        <option value="流行">流行</option>
                        <option value="摇滚">摇滚</option>
                        <option value="民谣">民谣</option>
                        <option value="电子">电子</option>
                        <option value="轻音乐">轻音乐</option>
                        <option value="爵士">爵士</option>
                        <option value="R&B">R&B</option>
                        <option value="乡村">乡村</option>
                        <option value="中国风">中国风</option>
                        <option value="说唱">说唱</option>
                        <option value="古典">古典</option>
                        <option value="世界音乐">世界音乐</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>文件大小</td>
                <td><input type="text" class="layui-input" name="size" readonly></td>
                <td>持续时长</td>
                <td><input type="text" class="layui-input" name="duration" readonly></td>
                <td>试听</td>
                <td>
                    <audio src="" class="shiting" controls></audio>
                </td>
            </tr>
            <tr>
                <td colspan="7">
                    <textarea class="layui-textarea" name="lrc"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>